<template>
    <div class="rank">
        <h4 class="title text-white">{{ title }}</h4>
        <!--:style="{height:height?`${height}px`:'auto',overflow:'auto'}"-->
        <div id="scroll-message" class="scroll-message-style">
            <!--@mouseenter="mEnter" @mouseleave="mLeave"-->
            <ul class="list"   >
                <li  v-for="(item, index) in list">
                    <span :class="item.num  < 4 ? 'active' : null">{{ item.num }}</span>
                    <span class="text-white">{{ item.name }}</span>
                    <span class="text-white">{{ item.total>10000 ? parseInt(item.total/1000) : item.total}}{{ item.total>10000 ? item.unitTon : item.unitKg}}</span>
                    <!--<span class="text-white">{{ item.total}}{{ item.unit}}</span>-->
                </li>
            </ul>
        </div>
    </div>

</template>

<script>
  export default {
    name: "DepartmentsRanking",
    // ['title', 'list']
    props: {
      title: {
        type: String,
        default: ''
      },
      list: {
        type: Array,
        default: null
      },
      height: {
        type: Number,
        default: null
      }
    },
    data(){
      return {
        // animate: false,
      }
    },
    mounted() {
      // 页面显示
      // this.timer1 = setInterval(this.scroll, 3000)
    },
    methods: {
      // scroll() {
      //   this.animate = !this.animate
      //   let that = this // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
      //   setTimeout(function() {
      //     that.list.push(that.list[0])
      //     that.list.shift()
      //     that.animate = !that.animate
      //   }, 3000)
      // },
      // mEnter() {
      //   clearInterval(this.timer1)
      // },
      // mLeave() {
      //   this.timer1 = setInterval(this.scroll, 3000)
      // },

      // beforeDestroy() {
      //   clearInterval(this.timer1)
      //   clearInterval(this.timer)
      // }

    }

  }
</script>

<style lang="less" scoped>

    .rank {
        padding: 10px 32px 32px 72px;

        .title{
            font-size: 18px;
            font-weight: bolder;
            text-align: center;
        }


        .scroll-message-style {
            margin: 0px auto;
            padding: 0;
            width: 100%;
            transition: all 5s;
            .list{
                margin-top: 20px;
                overflow-y: scroll;
                overflow-x: hidden;
                max-height: 5.5rem;
            }

            li {
                margin-top: 20px;
                list-style: none;
                span {
                    color: rgba(0, 0, 0, .65);
                    font-size: 14px;
                    line-height: 22px;

                    &:first-child {
                        background-color: #f5f5f5;
                        border-radius: 20px;
                        display: inline-block;
                        font-size: 12px;
                        font-weight: 600;
                        margin-right: 24px;
                        height: 20px;
                        line-height: 20px;
                        width: 20px;
                        text-align: center;
                    }
                    &.active {
                        background-color: #314659;
                        color: #fff;
                    }
                    &:last-child {
                        float: right;
                    }
                }
            }
        }
    }

    .mobile .rank {
        padding: 0 32px 32px 32px;
    }

</style>
